<template>
  <div>
    <!-- 2.jpg  1.png -->
    <div data-v-9f7a31ac="" class="login-header">
      <img data-v-9f7a31ac="" src="../assets/1.png" width="100%">
    </div>
      <van-form @submit="onSubmit" style="margin:10%;">
        <van-field
          v-model="username"
          name="账号"
          label="账号"
          placeholder="请输入账号"
          :rules="[{ required: true, message: '请填写账号' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
          <van-button class="btn ch" round block type="info" native-type="submit">登录</van-button>
        </div>
      </van-form>
  </div>
</template>

<script>
import { Toast } from 'vant';
import { Dialog } from 'vant';
export default {
  name:'login',
 data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    async onSubmit() {
      // if(this.username.length>=4){
      //       var reg=/[\u4E00-\u9FA5]/;
      //       if(reg.test(this.username)){
      //           Dialog.alert({
      //               theme:"round",
      //               title:"提醒",
      //               width:"70%",
      //               height:"30%",
      //               message:"账号格式有误~",
      //           }).then(()=>{})
      //           return;
      //       }
      // }else{
      //           Dialog.alert({
      //               theme:"round",
      //               title:"提醒",
      //               width:"70%",
      //               height:"30%",
      //               message:"账号长度为4~12位",
      //           }).then(()=>{})
      //           return;
      //     }
      // if(this.password.length>=6){
      //   var reg=/[\u4E00-\u9FA5]/;
      //   if(reg.test(this.password)){
      //       Dialog.alert({
      //           theme:"round",
      //           title:"提醒",
      //           width:"70%",
      //           height:"30%",
      //           message:"密码格式有误~",
      //       }).then(()=>{})
      //       return;
      //    }
      // }else{
      //   Dialog.alert({
      //       theme:"round",
      //       title:"提醒",
      //       width:"70%",
      //       height:"30%",
      //       message:"密码长度为6~12位",
      //   }).then(()=>{})
      //   return;
      // }
      this.$toast.loading({
        message:"登录中...",
        forbidClick:true,
        duration:0,
        position:"top",
      })
      // console.log({
      //   loginName:this.username,
      //   loginPassword:this.password,
      // });
      const data=this.$qs.stringify({
        loginName:this.username,
        loginPassword:this.password,
      })
      const res=await this.request({
        url:"/app/User/doLogin",
        data:data,
        method:"post",
      })
      // 'loginName='+this.username+'&loginPassword='+this.password
      // MissZhou
      // 'loginName=MissZhou&loginPassword=123456'
      console.log(res);
      if(res.data.status==200){
        sessionStorage.setItem("set_token",res.data.data);
        this.$router.push("/home");
        Toast.loading({
            message:"登录中...",
            position:"top",
        })
      }else{
        Toast.fail({
            message:"登录失败",
            position:"top",
        })
      }
    },
  },
}
</script>

<style lang="scss">
.login-header{
  display: flex;
}
.btn{
  background:#48d69f !important;
  height: 42px !important;
  border: 1px solid #48d69f !important;
}
.ch {
    margin-left: 15% !important;
}
</style>